<template>
  <div class="register-box">
    <div class="child">
      <div class="register-title">欢迎注册青岛港城一体化综合保障服务中心</div>
      <div style="width: 370px;">
         <Form ref="form" :model="formItem" :rules="ruleValidate">
           <FormItem prop="phone">
             <Input size="large" placeholder="请输入您的手机号" v-model="formItem.phone"></Input>
           </FormItem>
           <FormItem prop="img">
             <Row :gutter="10">
               <i-col span="16">
                 <Input size="large" placeholder="请输入图片验证码"  v-model="formItem.img"></Input>
               </i-col>
               <i-col span="8">
                 <verificate-code />
               </i-col>
             </Row>
           </FormItem>
           <FormItem prop="info">
             <Input size="large" placeholder="请输入短信验证码"  v-model="formItem.info">
               <Button slot="append" @click="getInfo" :disabled="sendSmsCodeBtn.disabled">{{sendSmsCodeBtn.text}}</Button>
             </Input>
           </FormItem>
           <FormItem prop="password">
             <Poptip word-wrap width="300" placement="right">
               <Input size="large" style="width: 370px;" type="password" v-show="!showEye" @on-click="showEye = !showEye"
                      v-model="formItem.password" placeholder="请设置您的密码" icon="md-eye-off"></Input>
               <Input size="large" style="width: 370px;"  v-show="showEye" @on-click="showEye = !showEye" v-model="formItem.password" placeholder="请设置您的密码" icon="md-eye"></Input>
               <div slot="content">
                 <p>密码长度为8-16位</p>
                 <p>大小写字母、数字、符号至少两种</p>
               </div>
             </Poptip>
           </FormItem>
           <FormItem prop="passwords">
             <Input size="large" type="password" v-show="!showScondeEye" @on-click="showScondeEye = !showScondeEye" v-model="formItem.passwords" placeholder="请再次输入密码" icon="md-eye-off"></Input>
             <Input size="large" v-show="showScondeEye" @on-click="showScondeEye = !showScondeEye"  v-model="formItem.passwords" placeholder="请再次输入密码" icon="md-eye"></Input>
           </FormItem>
           <FormItem>
             <Checkbox v-model="check">我已阅读并同意 <a href="javascript:void(0)">《xxxxxxxxxxx协议》</a></Checkbox>
           </FormItem>
           <FormItem style="margin-top: 20px">
             <Button type="primary" :disabled="!check" style="width: 100%;">同意协议并注册</Button>
           </FormItem>
         </Form>
      </div>
    </div>
  </div>
</template>

<script>
  import VerificateCode from "../component/verificate/VerificateCode";
  export default {
    name: "register",
    components: {VerificateCode},
    data() {
      return {
        formItem: {},
        showEye: false,
        showScondeEye: false,
        check: false,
        ruleValidate: {
          phone: [{required: true, message: '手机号不能为空'}],
          info: [{required: true, message: '短信验证码不能为空'}],
          passwords: [{required: true, message: '密码不能为空'}],
          password: [{required: true, message: '密码不能为空'}]
        },
        sendSmsCodeBtn: {
          disabled: false,
          text: '发送短信',
          counter: 60
        }
      }
    },
    methods: {
      getInfo() {
        if (!this.formItem.phone) {
          this.$warn('请填写手机号');
          return;
        }
        let _this = this;
        this.sendSmsCodeBtn.counter = 60;
        this.sendSmsCodeBtn.disabled = true;
        this.sendSmsCodeBtn.text = '60 秒';
        let timer = setInterval(() => {
          if (_this.sendSmsCodeBtn.counter > 1) {
            _this.sendSmsCodeBtn.counter--;
            this.sendSmsCodeBtn.text = _this.sendSmsCodeBtn.counter + ' 秒';
          } else {
            _this.sendSmsCodeBtn.text = '发送短信';
            this.sendSmsCodeBtn.disabled = false;
            clearInterval(timer);
          }
        }, 1000);
      }
    }
  }
</script>

<style>
  .ivu-tabs-tab {
    font-size: 16px !important;
    margin-right: 20px;
  }
</style>
<style scoped>
  .register-box {
    display: flex;
    justify-content: center;
    min-height: 170px;
    padding-top: 100px;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../../assets/images/bg.png);
  }

  .child {
    width: 60%;
    min-width: 625px;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0px 4px 16px 0px rgb(0 0 0 4%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px;
    margin-bottom: 100px;
  }

  .register-title {
    text-align: center;
    margin-bottom: 48px;
    font-size: 28px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    line-height: 28px;
  }

  .tab-content {
    padding-top: 20px;
    height: 280px;
  }
</style>
